<script setup>
import dayjs from 'dayjs';
let props = defineProps({
  col: {
    type: Object,
    default: () => {}
  },
  columns: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['command']);
// 按钮组事件
const handleAction = (command, { row, $index }) => {
  emit('command', command, row, $index);
};
</script>
<template>
  <!-- 如果有配置多级表头的数据，则递归该组件 -->
  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
  <template v-if="col.children && col.children.length">
    <el-table-column :label="col.label" :width="col.width" :align="col.align || 'center'">
      <TableColumn v-for="(item, index) in col.children" :key="index" :col="item" />
    </el-table-column>
  </template>
  <!-- 其他正常列 -->
  <!-- 配置了默认的溢出 -->
  <el-table-column v-else v-bind="col" show-overflow-tooltip>
    <template #default="{ row, $index }">
      <!---图片 (START)-->
      <!-- 如需更改图片size，可自行配置参数 -->
      <el-image
        v-if="col.type === 'image'"
        preview-teleported
        :hide-on-click-modal="true"
        :preview-src-list="[row[col.prop]]"
        :src="row[col.prop]"
        fit="cover"
        class="w-9 h-9 rounded-lg"
      />
      <!---图片 (END)-->
      <!--- 格式化日期 (本项目日期是时间戳，这里日期格式化可根据你的项目来更改) (START)-->
      <template v-else-if="col.type === 'date'">
        <!---十位数时间戳-->
        <span v-if="String(row[col.prop]) && String(row[col.prop]).length <= 10">
          {{ dayjs.unix(row[col.prop]).format(col.dateFormat ?? 'YYYY-MM-DD') }}
        </span>
        <!---十三位数时间戳-->
        <span v-else>{{ dayjs(row[col.prop]).format(col.dateFormat ?? 'YYYY-MM-DD') }}</span>
      </template>
      <!--- 格式化日期 (本项目日期是时间戳，这里日期格式化可根据你的项目来更改) (END)-->
      <!-- 如果传递按钮数组，就展示按钮组 START-->
      <el-button-group v-else-if="col.buttons?.length">
        <my-button
          v-for="(btn, index) in col.buttons"
          :key="index"
          :size="btn.size"
          :icon="btn.icon"
          :type="btn.type"
          @click="handleAction(btn.command, { row, $index })"
        ></my-button>
      </el-button-group>
      <!-- 如果传递按钮数组，就展示按钮组 END-->
      <!-- render函数 (START) -->
      <!-- 使用内置的component组件可以支持h函数渲染和txs语法 -->
      <component :is="col.render" v-else-if="col.render" :row="row" :index="$index" />

      <!-- 自定义渲染 -->
      <template v-else-if="col.customRender">
        <div v-html="col.customRender(row)"></div>
      </template>

      <!-- render函数 (END) -->
      <!-- 自定义slot (START) -->
      <slot v-else-if="col.slot" :slot-name="col.slot" :row="row" :index="$index"></slot>
      <!-- 自定义slot (END) -->
      <!-- 默认渲染 (START) -->
      <span v-else>{{ row[col.prop] || '--' }}</span>
      <!-- 默认渲染 (END) -->
    </template>
    <!-- 自定义表头 -->
    <template #header="{ column, $index }">
      <component :is="col.headerRender" v-if="col.headerRender" :column="column" :index="$index" />
      <slot v-else-if="col.headerSlot" name="customHeader" :slot-name="col.headerSlot" :column="column" :index="$index"> </slot>
      <span v-else>{{ column.label }}</span>
    </template>
  </el-table-column>
</template>
